<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	contentType="text/html"
	locale="#{currentLocale}">	

	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	
	<pm:page title="Endereço" >
	
        <f:facet name="postinit">
    		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
			<script type="text/javascript" src="#{request.contextPath}/scripts/mobUtils.js"></script>
            <script type="text/javascript">
				$(document).ready(function() {
					console.log("Inicializando o GMAP !!");
					initialize();
				});
            </script>
		</f:facet>
		

		<pm:view id="EnderecoMap" swatch="a">
            <pm:navBar>
                <p:button value="Images" href="#Images?reverse=true" />
                <p:button value="Device Description" href="#DDV?reverse=true" />
                <p:button value="EnderecoMap" href="#EnderecoMap?reverse=true" onclick="showMap(mapCli.map.center)"/>
                <p:button value="Alterar Endereço" href="#alterarEndereco?reverse=true" />
            </pm:navBar>
			<pm:content>
				<div id="enderecoCompleto" style="font-size:11px;"/>
				<div id="gmap" style="width: 100%; height: ${ddrMB.displayHeight};"/>
				<div id="screenSize" style="font-size:11px;">
					<h:outputText value="(${ddrMB.displayWidth} x ${ddrMB.displayHeight})" />
				</div>
			</pm:content>
		</pm:view>

		<pm:view id="alterarEndereco" swatch="a">
            <pm:navBar>
                <p:button value="Images" href="#Images?reverse=true" />
                <p:button value="Device Description" href="#DDV?reverse=true"/>
                <p:button value="EnderecoMap" href="#EnderecoMap?reverse=true" />
                <p:button value="Alterar Endereço" href="#alterarEndereco?reverse=true" />
            </pm:navBar>
			<pm:content>
            <h:form id="form_endereco">
				<pm:field>
					<h:outputLabel value="#{messages['endereco.label.cep']}: " for="cep" styleClass="text-input" />
					<h:inputText id="cep" value="#{ddrMB.endereco.cep}" title="#{messages['endereco.alt.cep']}" />
				</pm:field>
				
				<pm:field>
					<h:outputLabel value="#{messages['endereco.label.logradouro']}: " for="logradouro" styleClass="text-input" />
					<h:inputTextarea id="logradouro" value="#{ddrMB.endereco.logradouro}" title="#{messages['endereco.alt.logradouro']}" rows="2" cols="50"/>
				</pm:field>
				
				<pm:field>
					<h:outputLabel value="#{messages['endereco.label.numero']}: " for="numero" styleClass="text-input" />
					<h:inputText id="numero" value="#{ddrMB.endereco.numero}" title="#{messages['endereco.alt.numero']}" />
				</pm:field>
				
				<pm:field>
					<h:outputLabel value="#{messages['endereco.label.bairro']}: " for="bairro" styleClass="text-input" />
					<h:inputText id="bairro" value="#{ddrMB.endereco.bairro}" title="#{messages['endereco.alt.bairro']}" />
				</pm:field>
									
				<pm:field>
					<h:outputLabel value="#{messages['endereco.label.complemento']}: " for="complemento" styleClass="text-input" />
					<h:inputText id="complemento" value="#{ddrMB.endereco.complemento}" title="#{messages['endereco.alt.complemento']}" />
				</pm:field>
									
				<pm:field>
					<h:outputLabel value="#{messages['endereco.label.localidade']}: " for="localidade" styleClass="text-input" />
					<h:inputText id="localidade" value="#{ddrMB.endereco.localidade}" title="#{messages['endereco.alt.localidade']}" />
				</pm:field>
									
				<pm:field>
					<h:outputLabel value="#{messages['endereco.label.uf']}: " for="uf" styleClass="text-input" />
					<h:inputText id="uf" value="#{ddrMB.endereco.uf}" title="#{messages['endereco.alt.uf']}" />
				</pm:field>
				
				<pm:field>
					<h:outputLabel value="País: " for="uf" styleClass="text-input" />
					<h:inputText id="pais" value="#{ddrMB.endereco.pais}" title="País" />
				</pm:field>

				<pm:field>
					<h:outputLabel value="Lat Lng: " for="latLng" styleClass="text-input" />
					<h:inputText id="latLng" value="#{ddrMB.endereco.latLng}" title="Latitude / Longitude" />
				</pm:field>
				
				<pm:buttonGroup orientation="horizontal">
					<p:commandButton id="btn_EndByLogradouro" value="Pesquisar" onclick="codeAddress();" update="form_endereco"/>
					<p:commandButton id="btn_Gravar" value="Gravar" action="#{ddrMB.gravarEnderecoGmap}"  process="@form"/>
				</pm:buttonGroup>
				
               </h:form>
               
			</pm:content>
		</pm:view>

		<pm:view id="Images" swatch="a" >
            <pm:navBar>
                <p:button value="Images" href="#Images?reverse=true" />
                <p:button value="Device Description" href="#DDV?reverse=true" />
                <p:button value="Mapa Endereço" href="#EnderecoMap?reverse=true" />
                <p:button value="Alterar Endereço" href="#alterarEndereco?reverse=true" />
            </pm:navBar>
			<pm:content>
				<p:graphicImage value="#{ddrMB.imagemRedimensionada}"/>
				<br />
				<h:outputText value="#{ddrMB.imagemRedimensionada.name} (#{ddrMB.imagemRedimensionada.contentType})"/>
				<br />
				<h:outputText value="(#{ddrMB.imageWidth} x #{ddrMB.imageHeight}) (#{ddrMB.imageSise} bytes)"/>
			</pm:content>
		</pm:view>

		<pm:view id="DDV" swatch="a">
            <pm:navBar>
                <p:button value="Images" href="#Images?reverse=true" />
                <p:button value="Device Description" href="#DDV?reverse=true" />
                <p:button value="EnderecoMap" href="#EnderecoMap?reverse=true" />
                <p:button value="Alterar Endereço" href="#alterarEndereco?reverse=true" />
            </pm:navBar>
			<pm:content>
				<p:dataList value="#{ddrMB.listDdr}" var="prop">
					<pm:field>
						<h:outputLabel for="attr" value="#{prop.propertyRef.localPropertyName}"/>
						<h:inputText id="attr" value="${prop.string}"/>
					</pm:field>
				</p:dataList>
			</pm:content>
		</pm:view>
	</pm:page>
</f:view>
